<!--
 * @Description: 用户信息 - 主页面
 * @Author: DHL
 * @Date: 2022-04-02 14:02:17
 * @LastEditors: DHL
 * @LastEditTime: 2023-01-31 10:15:24
-->
<template>
  <div class="tw-user-wrapper">
    <splitpanes class="default-theme">
      <pane :size="20" class="pane-left">
        <organizationTree
          ref="orgTreeRef"
          :draggable="false"
          @nodeClick="handleNodeClick"
        ></organizationTree>
      </pane>
      <pane :size="80">
        <tw-layout @refresh="handleRefresh" @search="handleSearch" @reset="handleReset">
          <!-- 按钮组 -->
          <template #btns>
            <el-button
              class="item"
              type="danger"
              :loading="loadingByDel"
              :disabled="isSelectRows"
              v-auth="'USER-DEL-LOGIC-BATCH'"
              @click="handleDelete()"
            >
              <svg-icon iconClass="delete"></svg-icon>
              批量删除
            </el-button>

            <el-button
              class="item"
              type="primary"
              v-auth="'USER-ADD'"
              @click="handleOpenForm('add')"
            >
              <svg-icon iconClass="plus"></svg-icon>
              新增
            </el-button>
          </template>

          <!-- 查询表单 -->
          <template #header>
            <el-form ref="searchFormRef" :model="searchForm" label-width="90px">
              <el-row>
                <el-col :span="6">
                  <el-form-item label="登陆名称">
                    <el-input
                      v-model="searchForm.loginName"
                      clearable
                      placeholder="请输入登陆名称"
                    ></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label="姓名">
                    <el-input
                      v-model="searchForm.name"
                      clearable
                      placeholder="请输入姓名"
                    ></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label="用户类型">
                    <el-select v-model="searchForm.userType" clearable placeholder="请选择用户类型">
                      <tw-dic dicKey="USERTYPE"></tw-dic>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label="职务">
                    <el-input
                      v-model="searchForm.position"
                      clearable
                      placeholder="请输入职务"
                    ></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label="手机号码">
                    <el-input
                      v-model="searchForm.phone"
                      clearable
                      placeholder="请输入手机号码"
                    ></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label="邮箱">
                    <el-input
                      v-model="searchForm.mail"
                      clearable
                      placeholder="请输入邮箱"
                    ></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label="用户状态">
                    <el-select v-model="searchForm.status" clearable placeholder="请选择用户状态">
                      <tw-dic dicKey="USER_STATUS"></tw-dic>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="6" :style="{ 'text-align': 'center' }">
                  <el-checkbox
                    v-model="searchForm.isAllChildNode"
                    label="查询所有子机构用户"
                    border
                  ></el-checkbox>
                </el-col>
              </el-row>
            </el-form>
          </template>

          <!-- 数据表格 -->
          <tw-table
            ref="tableRef"
            :loading="loading"
            :options="tableOptions"
            :events="tableEvents"
            :data="tableData"
            @search="searchList"
          >
            <!-- 用户状态 -->
            <template #userStatus="{ row }">
              <vxe-switch
                v-model="row.status"
                open-label="有效"
                open-value="1"
                close-label="失效"
                close-value="0"
                @change="handleUpdateById(row)"
              ></vxe-switch>
            </template>

            <template #action="{ row }">
              <el-button link type="primary" v-auth="'USER-EDIT'" @click="handleOrgGrant(row)">
                授权机构
              </el-button>
              <el-button
                link
                type="success"
                v-auth="'USER-EDIT'"
                @click="handleShowResetPwdForm(row)"
              >
                重置密码
              </el-button>
              <el-button
                link
                type="warning"
                v-auth="'USER-EDIT'"
                @click="handleOpenForm('edit', row)"
              >
                编辑
              </el-button>
              <el-button
                link
                type="danger"
                v-auth="'USER-DEL-LOGIC-BATCH'"
                @click="handleDelete(row)"
              >
                删除
              </el-button>
            </template>
          </tw-table>
        </tw-layout>
      </pane>
    </splitpanes>

    <userForm ref="formRef" @refreshTableData="handleRefresh"></userForm>
    <userResetPwd ref="userResetPwdRef"></userResetPwd>
    <userOrgGrant ref="userOrgGrantRef"></userOrgGrant>
  </div>
</template>

<script src="./useIndex.ts"></script>

<style scoped lang="scss">
  .tw-user-wrapper {
    height: 100%;
    background-color: #ffffff;

    :deep(.splitpanes) {
      .splitpanes__pane {
        background-color: #ffffff;
      }
    }

    .pane-left {
      height: calc(100% - 20px);
      padding: 10px;
    }
  }
</style>
